<template>
  <div id='reply' ref="param">
    <el-tabs :tab-position="'left'" v-model="activeName" @tab-click="handleClick" style="height: 700px;overflow:auto;">
      <el-tab-pane label="预警服务" name="mqtt">
        <div class="scroll-content" ref="main">
          <el-form ref="form" :model="mqttForm" label-position="left" :inline="true" label-width="85px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-form-item label="预警服务" prop="isOpenWarning ">
                  <el-radio-group v-model="mqttForm.isOpenWarning" style="width: 320px;" :disabled="updateOpen">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">MQTT直连配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8"> <el-form-item label="客户端ID" prop=" mqttClientId ">
                      <span class="input-text" v-if="updateOpen">{{ mqttForm.mqttClientId }}</span>
                      <el-input v-else v-model="mqttForm.mqttClientId" placeholder="请输入客户端ID" />
                    </el-form-item></el-col>
                  <el-col :span="8"> <el-form-item label="群组ID" prop="groupId ">
                      <span class="input-text" v-if="updateOpen">{{ mqttForm.groupId }}</span>
                      <el-input v-else v-model="mqttForm.groupId" placeholder="请输入群组id" />
                    </el-form-item></el-col>
                  <el-col :span="8"> <el-form-item label="服务IP地址" prop="mqttIp ">
                      <span class="input-text" v-if="updateOpen">{{ mqttForm.mqttIp }}</span>
                      <el-input v-else v-model="mqttForm.mqttIp" placeholder="请输入mqtt服务ip地址" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8"><el-form-item label="服务端口" prop="mqttPort">
                      <span class="input-text" v-if="updateOpen">{{ mqttForm.mqttPort }}</span>
                      <el-input v-else v-model="mqttForm.mqttPort" placeholder="请输入mqtt端口号" />
                    </el-form-item></el-col>
                  <el-col :span="8"> <el-form-item label="账号" prop="mqttAccount">
                      <span class="input-text" v-if="updateOpen">{{ mqttForm.mqttAccount }}</span>
                      <el-input v-else v-model="mqttForm.mqttAccount" placeholder="请输入mqtt账号" />
                    </el-form-item></el-col>
                  <el-col :span="8"> <el-form-item label="密码" prop="mqttPassword">
                      <span class="input-text" v-if="updateOpen">{{ mqttForm.mqttPassword }}</span>
                      <el-input v-else v-model="mqttForm.mqttPassword" :type="passwordOnOff ? 'password' : 'text'"
                        placeholder="请输入mqtt密码">
                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                        <svg-icon slot="suffix" @click="hidden" icon-class="eye-close"
                          class="el-input__icon input-icon el-input__clear" />
                      </el-input>
                    </el-form-item></el-col>
                </el-row>

              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">主题配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="预警主题" prop="subscribedTopicWarning">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.subscribedTopicWarning }}</span>
                      <el-input v-else v-model="mqttForm.subscribedTopicWarning" placeholder="请输入预警主题" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="预警回复" prop="ackTopicWarning">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.ackTopicWarning }}</span>
                      <el-input v-else v-model="mqttForm.ackTopicWarning" placeholder="请输入回复主题" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="速报主题" prop="subscribedTopicReport">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.subscribedTopicReport }}</span>
                      <el-input v-else v-model="mqttForm.subscribedTopicReport" placeholder="请输入速报主题" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="速报回复" prop="ackTopicReport">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.ackTopicReport }}</span>
                      <el-input v-else v-model="mqttForm.ackTopicReport" placeholder="请输入速报回复主题" />
                    </el-form-item></el-col>
                </el-row>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">标准配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="license" prop="license">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.license }}</span>
                      <el-input v-else v-model="mqttForm.license" placeholder="请输入mqtt注册地址" @change="isregister = true" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="owner" prop="owner">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.owner }}</span>
                      <el-input v-else v-model="mqttForm.owner" placeholder="请输入mqtt注册地址" @change="isregister = true" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="type" prop="type">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.type }}</span>
                      <el-input v-else v-model="mqttForm.type" placeholder="请输入mqtt注册地址" @change="isregister = true" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="协议地址" prop="serverIp">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.serverIp }}</span>
                      <el-input v-else v-model="mqttForm.serverIp" placeholder="请输入mqtt注册地址" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="注册接口" prop="mqttRegisterUrl">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.mqttRegisterUrl }}</span>
                      <el-input v-else v-model="mqttForm.mqttRegisterUrl" placeholder="请输入mqtt注册接口" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="授权接口" prop="mqttAuthenticationUrl">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.mqttAuthenticationUrl }}</span>
                      <el-input v-else v-model="mqttForm.mqttAuthenticationUrl" placeholder="请输入mqtt授权接口" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="Token接口" prop="mqttConnectToken">
                      <span v-if="updateOpen" class="input-text">{{ mqttForm.ackTopicReport }}</span>
                      <el-input v-else v-model="mqttForm.mqttConnectToken" placeholder="请输入mqtt授权后返回的token" />
                    </el-form-item></el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="管理服务" name="netty">
        <div class="scroll-content" ref="main">
          <el-form :model="nettyForm" :inline="true" label-position="" label-width="85px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="服务地址" prop="nettyAddress">
                      <span v-if="updateOpen" class="input-text">{{ nettyForm.nettyAddress }}</span>
                      <el-input v-else v-model="nettyForm.nettyAddress" placeholder="请输入netty连接地址" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="服务端口" prop="nettyPort">
                      <span v-if="updateOpen" class="input-text">{{ nettyForm.nettyPort }}</span>
                      <el-input v-else v-model="nettyForm.nettyPort" placeholder="请输入netty端口号" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="重连时间" prop="nettyReconnectTime">
                      <span v-if="updateOpen" class="input-text">{{ nettyForm.nettyReconnectTime }}</span>
                      <el-input v-else v-model="nettyForm.nettyReconnectTime" placeholder="请输入netty断开重连时间" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="心跳时间" prop="nettyBeatDelayTime">
                      <span v-if="updateOpen" class="input-text">{{ nettyForm.nettyBeatDelayTime }}</span>
                      <el-input v-else v-model="nettyForm.nettyBeatDelayTime" placeholder="请输入netty断开重连时间" />
                    </el-form-item></el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文件服务" name="file">
        <div class="scroll-content" ref="main">
          <el-form :model="fileForm" :inline="true" label-position="left" label-width="125px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="文件上传服务" prop="isOpenFileServer">
                      <el-radio-group v-model="fileForm.isOpenFileServer" :disabled="updateOpen">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="上传预警文件" prop="isFileUploadWarningData">
                      <el-radio-group v-model="fileForm.isFileUploadWarningData" :disabled="updateOpen">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="上传日志" prop="isFileUploadLogs">
                      <el-radio-group v-model="fileForm.isFileUploadLogs" :disabled="updateOpen">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="服务类型" prop="fileServerType">
                      <span v-if="updateOpen" class="input-text">{{
                        fileForm.fileServerType ? fileForm.fileServerType == '1' ? 'FTP服务' : '对象存储' : '' }}</span>
                      <el-select v-else v-model="fileForm.fileServerType" placeholder="请选择文件上传类型">
                        <el-option label="对象存储" value="0">
                        </el-option>
                        <el-option label="FTP服务" value="1">
                        </el-option>
                      </el-select>
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="预警文件上传延时" prop="fileUploadTime">
                      <span v-if="updateOpen" class="input-text">{{ formatFileUploadTime(fileForm.fileUploadTime)
                      }}</span>
                      <el-select v-else v-model="fileForm.fileUploadTime" placeholder="请选择文件上传类型">
                        <el-option label="随机" value="0">
                        </el-option>
                        <el-option label="立即" value="1">
                        </el-option>
                        <el-option label="2分钟" value="2">
                        </el-option>
                        <el-option label="5分钟" value="5">
                        </el-option>
                        <el-option label="10分钟" value="10">
                        </el-option>
                      </el-select>
                    </el-form-item></el-col>
                </el-row>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">对象存储</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="服务地址" prop="fileServerIp">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.fileServerIp }}</span>
                      <el-input v-else v-model="fileForm.fileServerIp" placeholder="请输入文件服务地址" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="服务端口" prop="fileServerPort">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.fileServerPort }}</span>
                      <el-input v-else v-model="fileForm.fileServerPort" placeholder="请输入文件服务账号" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="AccessKey" prop="fileAccessKey">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.fileAccessKey }}</span>
                      <el-input v-else v-model="fileForm.fileAccessKey" placeholder="请输入文件服务访问密钥" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="SecretKey" prop="fileSecretKey">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.fileSecretKey }}</span>
                      <el-input v-else v-model="fileForm.fileSecretKey" :type="passwordOnOff1 ? 'password' : 'text'"
                        placeholder="请输入文件服务私密密钥">
                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                        <svg-icon slot="suffix" @click="hidden1" icon-class="eye-close"
                          class="el-input__icon input-icon el-input__clear" /></el-input>
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="BucketName" prop="fileBucketName">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.fileAccessKey }}</span>
                      <el-input v-else v-model="fileForm.fileBucketName" placeholder="请输入文件服务空间名称" />
                    </el-form-item></el-col>
                </el-row>
                <!-- <el-form-item label="服务地址" prop="fileServerIp">
                  <el-input v-model="fileForm.fileServerIp"  placeholder="请输入文件服务地址" />
                </el-form-item> -->
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">FTP服务</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="服务地址" prop="ftpServerIp">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.ftpServerIp }}</span>
                      <el-input v-else v-model="fileForm.ftpServerIp" placeholder="请输入FTP服务地址" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="服务端口" prop="ftpServerPort">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.ftpServerPort }}</span>
                      <el-input v-else v-model="fileForm.ftpServerPort" placeholder="请输入FTP服务端口" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="账号" prop="ftpUsername">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.ftpUsername }}</span>
                      <el-input v-else v-model="fileForm.ftpUsername" placeholder="请输入FTP账号" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="密码" prop="ftpPassword">
                      <span v-if="updateOpen" class="input-text">{{ fileForm.ftpPassword }}</span>
                      <el-input v-else v-model="fileForm.ftpPassword" :type="passwordOnOff ? 'password' : 'text'"
                        placeholder="请输入FTP密码">
                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                        <svg-icon slot="suffix" @click="hidden" icon-class="eye-close"
                          class="el-input__icon input-icon el-input__clear" />
                      </el-input>
                    </el-form-item></el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="定位服务" name="gps">
        <div class="scroll-content" ref="main">
          <el-form :model="gpsForm" :inline="true" label-position="left" label-width="100px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-form-item label="自动定位服务" prop="isAutoLocation ">
                  <el-radio-group v-model="gpsForm.isAutoLocation" style="width: 320px;" :disabled="updateOpen">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">参数配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="经度" prop="localLongitude ">
                      <span v-if="updateOpen" class="input-text">{{ gpsForm.localLongitude }}</span>
                      <el-input v-else v-model="gpsForm.localLongitude" placeholder="请输入经度"
                        @change="changeGps(gpsForm.localLongitude, gpsForm.localLatitude)">
                        <template slot="append">度</template>
                      </el-input>
                    </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="纬度" prop="localLatitude ">
                      <span v-if="updateOpen" class="input-text">{{ gpsForm.localLatitude }}</span>
                      <el-input v-else v-model="gpsForm.localLatitude" placeholder="请输入纬度"
                        @change="changeGps(gpsForm.localLongitude, gpsForm.localLatitude)">
                        <template slot="append">度</template>
                      </el-input>
                    </el-form-item></el-col>
                </el-row>
                <Map ref="map" @updateLocation="updateLocation" />
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="对时服务" name="ntp">
        <div class="scroll-content" ref="main">
          <el-form :model="ntpForm" :inline="true" label-position="left" label-width="100px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-form-item label="自动对时服务" prop="isOpenNtp ">
                  <el-radio-group v-model="ntpForm.isOpenNtp" style="width: 320px;" :disabled="updateOpen"
                    @change="changTime(ntpForm.isOpenNtp)">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">参数配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="对时服务地址" prop="ntpAddress">
                      <span v-if="updateOpen" class="input-text">{{ ntpForm.ntpAddress }}</span>
                      <el-input v-else v-model="ntpForm.ntpAddress" placeholder="请输入ntp对时地址" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="对时频率(分)" prop="ntpTime">
                      <span v-if="updateOpen" class="input-text">{{ ntpForm.ntpTime }}</span>
                      <el-input v-else v-model="ntpForm.ntpTime" placeholder="请输入ntp对时时间" />
                    </el-form-item></el-col>
                  <el-col :span="8" v-if="setDate">
                    <el-form-item label="设置系统时间" prop="systemTime">
                      <span v-if="updateOpen" class="input-text">{{ timestampToTime(ntpForm.systemTime) }}</span>
                      <el-date-picker v-else v-model="ntpForm.systemTime" value-format="timestamp" type="datetime"
                        placeholder="选择系统时间">
                      </el-date-picker>
                    </el-form-item></el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="气象服务" name="weather">
        <div class="scroll-content" ref="main">
          <el-form :model="weatherForm" :inline="true" label-position="left" label-width="85px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-form-item label="气象服务" prop="isOpen">
                  <el-radio-group v-model="weatherForm.isOpen" style="width: 320px;" :disabled="updateOpen">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预警配置" name="warn">
        <div class="scroll-content" ref="main">
          <el-form :model="warnForm" :inline="true" label-position="left" label-width="125px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <!-- <el-form-item label="预警服务" prop="isOpenWarning ">
                      <el-radio-group v-model="warnForm.isOpenWarning" style="width: 320px;" >
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item> -->
                <el-form-item label="预警截屏服务" prop="isOpenWarningScreenshot ">
                  <el-radio-group v-model="warnForm.isOpenWarningScreenshot" style="width: 320px;" :disabled="updateOpen">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="自动同步预警等级" prop="isAutoSynWarnScope ">
                  <el-radio-group v-model="warnForm.isAutoSynWarnScope" style="width: 320px;" :disabled="updateOpen">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">等级配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="无预警烈度" prop="warnNoneScope ">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warnNoneScope }}</span>
                      <el-input v-else v-model="warnForm.warnNoneScope" placeholder="请输入无预警的烈度区间" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="蓝色预警烈度" prop="warnBlueScope">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warnBlueScope }}</span>
                      <el-input v-else v-model="warnForm.warnBlueScope" placeholder="请输入蓝色预警的烈度区间" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="黄色预警烈度" prop="warnYellowScope">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warnYellowScope }}</span>
                      <el-input v-else v-model="warnForm.warnYellowScope" placeholder="请输入黄色预警的烈度区间" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="橙色预警烈度" prop="warnOrangeScope">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warnOrangeScope }}</span>
                      <el-input v-else v-model="warnForm.warnOrangeScope" placeholder="请输入橙色预警的烈度区间" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="红色预警烈度" prop="warnRedScope">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warnRedScope }}</span>
                      <el-input v-else v-model="warnForm.warnRedScope" placeholder="请输入红色预警的烈度区间" />
                    </el-form-item></el-col>
                </el-row>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">响应配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="无预警动作" prop="warnNoneResponseConfig">
                      <span v-if="updateOpen" class="input-text">{{ warnNoneResponse.join(',') }}</span>
                      <el-checkbox-group v-else v-model="warnNoneResponse"
                        @change="handleCheckedChange(warnNoneResponse, 'warnNoneResponse')">
                        <el-checkbox v-for="(city, index) in warnNoneConfigList" :label="city" :key="index">{{ city
                        }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="蓝色预警动作" prop="warnBlueResponseConfig">
                      <span v-if="updateOpen" class="input-text">{{ warnBlueResponse.join(',') }}</span>
                      <el-checkbox-group v-else v-model="warnBlueResponse"
                        @change="handleCheckedChange(warnBlueResponse, 'warnBlueResponse')">
                        <el-checkbox v-for="(city, index) in warnConfigList" :label="city" :key="index">{{ city
                        }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="黄色预警动作" prop="warnYellowResponseConfig">
                      <span v-if="updateOpen" class="input-text">{{ warnYellowResponse.join(',') }}</span>
                      <el-checkbox-group v-else v-model="warnYellowResponse"
                        @change="handleCheckedChange(warnYellowResponse, 'warnYellowResponse')">
                        <el-checkbox v-for="(city, index) in warnConfigList" :label="city" :key="index">{{ city
                        }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="橙色预警动作" prop="warnOrangeResponseConfig">
                      <span v-if="updateOpen" class="input-text">{{ warnOrangeResponse.join(',') }}</span>
                      <el-checkbox-group v-else v-model="warnOrangeResponse"
                        @change="handleCheckedChange(warnOrangeResponse, 'warnOrangeResponse')">
                        <el-checkbox v-for="(city, index) in warnConfigList" :label="city" :key="index">{{ city
                        }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="红色预警动作" prop="warnRedResponseConfig">
                      <span v-if="updateOpen" class="input-text">{{ warnRedResponse.join(',') }}</span>
                      <el-checkbox-group v-else v-model="warnRedResponse"
                        @change="handleCheckedChange(warnRedResponse, 'warnRedResponse')">
                        <el-checkbox v-for="(city, index) in warnConfigList" :label="city" :key="index">{{ city
                        }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item></el-col>
                </el-row>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">参数配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="播报倒计时(秒)" prop="warnCountdownTime">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warnCountdownTime }}</span>
                      <el-input v-else v-model="warnForm.warnCountdownTime" placeholder="请输入预警播报倒计时" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="地震S波速率" prop="waveSpeedS">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.waveSpeedS }}</span>
                      <el-input v-else v-model="warnForm.waveSpeedS" placeholder="请输入地震S波平均速率" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="取消信息展示时间(秒)" label-width="150px" prop="warnCancelTime">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warnCancelTime }}</span>
                      <el-input v-else v-model="warnForm.warnCancelTime" style="width:200px" placeholder="请输入预警取消展示时间" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="地震统计信息展示时间(分)" label-width="200px" prop="warnInfoShowTime">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warnInfoShowTime }}</span>
                      <el-input v-else v-model="warnForm.warnInfoShowTime" placeholder="请输入地震预警统计信息展示时间" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="地震到达后警报持续时间(秒)" label-width="200px" prop="warningTime">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.warningTime }}</span>
                      <el-input v-else v-model="warnForm.warningTime" placeholder="请输入地震到达后警报持续时间" />
                    </el-form-item></el-col>
                </el-row>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">响应模式</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="预警响应模式" prop="warnShowModel">
                      <span v-if="updateOpen" class="input-text">{{ formatModel(warnForm.warnShowModel) }}</span>
                      <el-select v-else v-model="warnForm.warnShowModel" placeholder="请选择预警响应模式">
                        <el-option label="按最新预警更新" value="0">
                        </el-option>
                        <el-option label="按本地预估烈度更新" value="1">
                        </el-option>
                        <el-option label="按预警等级更新" value="2">
                        </el-option>
                      </el-select>
                    </el-form-item></el-col>
                </el-row>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">证书配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="是否开启证书" prop="isOpenVerify">
                      <el-radio-group v-model="warnForm.isOpenVerify" :disabled="updateOpen">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="公钥" prop="publicKey" label-width="80px">
                      <span v-if="updateOpen" class="input-text">{{ warnForm.publicKey }}</span>
                      <el-upload v-else style="display:flex" :action="upload.url" :show-file-list="false" ref="upload"
                        :auto-upload="false" :limit="1" :on-change="handeFile" :file-list="upload.fileList">
                        <el-input v-model="warnForm.publicKey" disabled style="width:320px" />
                        <el-button size="small" icon="el-icon-upload2" :disabled="isupload"
                          v-if="upload.fileList.length == 0">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="速报配置" name="report">
        <div class="scroll-content" ref="main">
          <el-form :model="reportForm" :inline="true" label-position="left" label-width="125px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-form-item label="速报服务" prop=" isOpenReporting ">
                  <el-radio-group v-model="reportForm.isOpenReporting" style="width: 320px;" :disabled="updateOpen">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="速报来源" prop="reportSource">
                  <span v-if="updateOpen" class="input-text">{{ formatReportSource(reportForm.reportSource) }}</span>
                  <el-select v-else v-model="reportForm.reportSource" placeholder="请选择速报来源">
                    <el-option label="预警平台" value="0">
                    </el-option>
                    <el-option label="管理平台" value="1">
                    </el-option>
                    <el-option label="预警平台&管理平台" value="2">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">参数配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="速报播报次数" prop="reportVoiceRepeatTimes ">
                      <span v-if="updateOpen" class="input-text">{{ reportForm.reportVoiceRepeatTimes }}</span>
                      <el-input v-else v-model="reportForm.reportVoiceRepeatTimes" placeholder="请输入速报播报次数" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="首页滚动时间(分)" prop="reportRollTime ">
                      <span v-if="updateOpen" class="input-text">{{ reportForm.reportRollTime }}</span>
                      <el-input v-else v-model="reportForm.reportRollTime" placeholder="请输入首页滚动时间" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="到达后展示时间(秒)" label-width="135px" prop="reportTime">
                      <span v-if="updateOpen" class="input-text">{{ reportForm.reportTime }}</span>
                      <el-input v-else v-model="reportForm.reportTime" placeholder="请输入到达后展示时间" />
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="首页轮播间隔(秒)" prop="reportLoopTime">
                      <span v-if="updateOpen" class="input-text">{{ reportForm.reportLoopTime }}</span>
                      <el-input v-else v-model="reportForm.reportLoopTime" placeholder="请输入首页速报轮播间隔" />
                    </el-form-item></el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="声音配置" name="volume">
        <div class="scroll-content" ref="main">
          <el-form :model="volumeForm" :inline="true" label-position="left" label-width="125px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">参数配置</div>
              </div>
              <div class="card-container">
                <div class="scroll-item-content">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="蓝色预警音量" prop=" warnBlueVolume ">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnBlueVolume }}</span>
                        <el-input v-else v-model="volumeForm.warnBlueVolume" placeholder="请输入蓝色预警音量" />
                      </el-form-item></el-col>
                    <el-col :span="8">
                      <el-form-item label="蓝色预警音频" prop="warnBlueAudio">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnBlueAudio }}</span>
                        <el-select v-else v-model="volumeForm.warnBlueAudio" placeholder="请选择蓝色预警音频">
                          <el-option v-for="item in volumeForm.warnAudioList" :key="item" :label="item" :value="item">
                          </el-option>
                        </el-select>
                      </el-form-item></el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="黄色预警音量" prop="warnYellowVolume ">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnYellowVolume }}</span>
                        <el-input v-else v-model="volumeForm.warnYellowVolume" placeholder="请输入黄色预警音量" />
                      </el-form-item></el-col>
                    <el-col :span="8">
                      <el-form-item label="黄色预警音频" prop="warnYellowAudio">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnYellowAudio }}</span>
                        <el-select v-else v-model="volumeForm.warnYellowAudio" placeholder="请选择黄色预警音频">
                          <el-option v-for="item in volumeForm.warnAudioList" :key="item" :label="item" :value="item">
                          </el-option>
                        </el-select>
                      </el-form-item></el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="橙色预警音量" prop="warnOrangeVolume ">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnOrangeVolume }}</span>
                        <el-input v-else v-model="volumeForm.warnOrangeVolume" placeholder="请输入橙色预警音量" />
                      </el-form-item></el-col>
                    <el-col :span="8">
                      <el-form-item label="橙色预警音频" prop="warnOrangeAudio">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnOrangeAudio }}</span>
                        <el-select v-else v-model="volumeForm.warnOrangeAudio" placeholder="请选择橙色预警音频">
                          <el-option v-for="item in volumeForm.warnAudioList" :key="item" :label="item" :value="item">
                          </el-option>
                        </el-select>
                      </el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="红色预警音量" prop="warnRedVolume">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnRedVolume }}</span>
                        <el-input v-else v-model="volumeForm.warnRedVolume" placeholder="请输入红色预警音量" />
                      </el-form-item></el-col>
                    <el-col :span="8">
                      <el-form-item label="红色预警音频" prop="warnRedAudio">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnRedAudio }}</span>
                        <el-select v-else v-model="volumeForm.warnRedAudio" placeholder="请选择红色预警音频">
                          <el-option v-for="item in volumeForm.warnAudioList" :key="item" :label="item" :value="item">
                          </el-option>
                        </el-select>
                      </el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="预警取消音量" prop="warnCancelVolume">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.warnCancelVolume }}</span>
                        <el-input v-else v-model="volumeForm.warnCancelVolume" placeholder="请输入预警取消音量" />
                      </el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="速报播报音量" prop="reportVolume ">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.reportVolume }}</span>
                        <el-input v-else v-model="volumeForm.reportVolume" placeholder="请输入速报播报音量" />
                      </el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="气象播放音量" prop="weatherWarnVolume">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.weatherWarnVolume }}</span>
                        <el-input v-else v-model="volumeForm.weatherWarnVolume" placeholder="请输入气象播放音量" />
                      </el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="视频播放音量" prop="videoVolume">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.videoVolume }}</span>
                        <el-input v-else v-model="volumeForm.videoVolume" placeholder="请输入视频播放音量" />
                      </el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="消音音量" prop="silenceVolume">
                        <span v-if="updateOpen" class="input-text">{{ volumeForm.silenceVolume }}</span>
                        <el-input v-else v-model="volumeForm.silenceVolume" placeholder="请输入消音音量" />
                      </el-form-item></el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="屏显配置" name="energy">
        <div class="scroll-content" ref="main">
          <el-form :model="energyForm" :inline="true" label-position="left" label-width="125px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="显示模式" prop="screenLightStatus">
                      <span v-if="updateOpen" class="input-text">{{ formatScreenLightStatus(energyForm.screenLightStatus)
                      }}</span>
                      <el-select v-else v-model="energyForm.screenLightStatus" placeholder="请选择亮度类型">
                        <el-option label="常亮" value="0">
                        </el-option>
                        <el-option label="人体感应模式" value="1">
                        </el-option>
                        <el-option label="自定义" value="2">
                        </el-option>
                      </el-select>
                    </el-form-item></el-col>
                    <el-col :span="8">
                    <el-form-item label="屏幕亮度" prop="screenShowModel">
                      <span v-if="updateOpen" class="input-text">{{ energyForm.screenShowModel ?
                        energyForm.screenShowModel == '1' ? '高亮显示' : '自动模式' : ''
                      }}</span>
                      <el-select v-else v-model="energyForm.screenShowModel" placeholder="请选择节能配置">
                        <el-option label="自动模式" value="0">
                        </el-option>
                        <el-option label="高亮显示" value="1">
                        </el-option>
                      </el-select>
                    </el-form-item></el-col>
                </el-row>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">人体感应模式</div>
              </div>
              <div class="card-container">
                <el-row>
                 
                  <el-col :span="8">
                    <el-form-item  label="延时熄屏时间" prop="screenLightTime">
                      <span v-if="updateOpen" class="input-text">{{ formatScreenLightTime(energyForm.screenLightTime)
                      }}</span>
                      <el-select v-else v-model="energyForm.screenLightTime" placeholder="请选择延时熄屏时间">
                        <el-option label="30秒" value="0">
                        </el-option>
                        <el-option label="1分钟" value="1">
                        </el-option>
                        <el-option label="10分钟" value="10">
                        </el-option>
                        <el-option label="15分钟" value="15">
                        </el-option>
                      </el-select>
                    </el-form-item></el-col>
                </el-row>
              </div>
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">自定义模式</div>
              </div>
              <div class="card-container">
                <div class="scroll-item-content">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="人体感应服务" prop="isCustomOpenSensor">
                        <el-radio-group v-model="energyForm.isCustomOpenSensor" :disabled="updateOpen">
                          <el-radio label="1">开启</el-radio>
                          <el-radio label="0">关闭</el-radio>
                        </el-radio-group>
                      </el-form-item></el-col>
                    <el-col :span="8">
                      <el-form-item label="是否开启节假日" prop="isOpenHoliday">
                        <el-radio-group v-model="energyForm.isOpenHoliday" :disabled="updateOpen">
                          <el-radio label="1">开启</el-radio>
                          <el-radio label="0">关闭</el-radio>
                        </el-radio-group>
                      </el-form-item></el-col>
                    <el-col :span="8">
                      <el-form-item label="时间段2服务" prop="isCustomDarkScreen">
                        <el-radio-group v-model="energyForm.isCustomDarkScreen" :disabled="updateOpen">
                          <el-radio label="1">开启</el-radio>
                          <el-radio label="0">关闭</el-radio>
                        </el-radio-group>
                      </el-form-item></el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="延时熄屏时间(分)" prop="delayTimeDarkScreen">
                        <span v-if="updateOpen" class="input-text">{{ energyForm.delayTimeDarkScreen }}</span>
                        <el-input v-else v-model="energyForm.delayTimeDarkScreen" placeholder="请输入延时熄屏时间(分)" />
                      </el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="时间段1开启时间" prop="startScreenTime">
                        <span v-if="updateOpen" class="input-text">{{ energyForm.startScreenTime }}</span>
                        <el-input v-else v-model="energyForm.startScreenTime" placeholder="请输入时间段1开启时间" />
                      </el-form-item></el-col>
                    <el-col :span="8">
                      <el-form-item label="时间段1结束时间" prop="endScreenTime">
                        <span v-if="updateOpen" class="input-text">{{ energyForm.endScreenTime }}</span>
                        <el-input v-else v-model="energyForm.endScreenTime" placeholder="请输入时间段1结束时间" />
                      </el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="时间段2开启时间" prop="customStartScreenTime">
                        <span v-if="updateOpen" class="input-text">{{ energyForm.customStartScreenTime }}</span>
                        <el-input v-else v-model="energyForm.customStartScreenTime" placeholder="请输入时间段2开启时间" />
                      </el-form-item></el-col>
                    <el-col :span="8">
                      <el-form-item label="时间段2结束时间" prop="customEndScreenTime">
                        <span v-if="updateOpen" class="input-text">{{ energyForm.customEndScreenTime }}</span>
                        <el-input v-else v-model="energyForm.customEndScreenTime" placeholder="请输入时间段2结束时间" />
                      </el-form-item></el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频配置" name="video">
        <div class="scroll-content" ref="main">
          <el-form :model="videoForm" :inline="true" label-position="left" label-width="100px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="录制分辨率" prop="videoResolution">
                      <span v-if="updateOpen" class="input-text">{{
                        videoForm.videoResolution ? videoForm.videoResolution == '1' ? '720p' : '480p' : '' }}</span>
                      <el-select v-else v-model="videoForm.videoResolution" placeholder="请选择录制分辨率">
                        <el-option label="480p" value="0">
                        </el-option>
                        <el-option label="720p" value="1">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="烈度触发采集视频" prop="isOpenVideoRecord" label-width="125px">
                      <el-radio-group v-model="videoForm.isOpenVideoRecord" style="" :disabled="updateOpen">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="触发采集烈度" prop="recordIntensity ">
                      <span v-if="updateOpen" class="input-text">{{ videoForm.recordIntensity }}</span>
                      <el-input v-else v-model="videoForm.recordIntensity" placeholder="请输入触发采集烈度" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="采集时间" prop="recordDelayTime ">
                      <span v-if="updateOpen" class="input-text">{{
                        videoForm.recordDelayTime ? videoForm.recordDelayTime + 's' : '' }}</span>
                      <el-input v-else v-model="videoForm.recordDelayTime" placeholder="请输入采集时间" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="设备配置" name="device">
        <div class="scroll-content" ref="main">
          <el-form :model="deviceForm" :inline="true" label-position="left" label-width="125px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">服务配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="首页图片是否循环" prop="isBannerLoop">
                      <el-radio-group v-model="deviceForm.isBannerLoop" :disabled="updateOpen">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="首页图片循环间隔" prop="bannerLoopTime ">
                      <span v-if="updateOpen" class="input-text">{{ deviceForm.bannerLoopTime ?
                        deviceForm.bannerLoopTime + '秒' : '' }}</span>
                      <el-input v-else v-model="deviceForm.bannerLoopTime" placeholder="请输入首页图片循环间隔" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="是否开启自动清理" prop="isAutoClean ">
                      <el-radio-group v-model="deviceForm.isAutoClean" :disabled="updateOpen">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="天气更新间隔" prop="weatherIntervalTime">
                      <span v-if="updateOpen" class="input-text">{{ deviceForm.weatherIntervalTime }}</span>
                      <el-input v-else v-model="deviceForm.weatherIntervalTime" placeholder="请输入天气更新间隔" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="预警资料保存份数" prop="warningFileCount">
                      <span v-if="updateOpen" class="input-text">{{ deviceForm.warningFileCount }}</span>
                      <el-input v-else v-model="deviceForm.warningFileCount" placeholder="请输入预警资料保存份数" />
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="日志保存天数" prop="logsFileDay">
                      <span v-if="updateOpen" class="input-text">{{ deviceForm.logsFileDay }}</span>
                      <el-input v-else v-model="deviceForm.logsFileDay" placeholder="请输入日志保存天数" />
                    </el-form-item></el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="配置备份" name="copy">
        <div ref="main">
          <div ref="main">
            <div class="body-title">
              <div class="body-title-right">
                <el-button size="mini" @click="handelAdd" icon="el-icon-plus">新
                  增</el-button>
              </div>
            </div>
            <el-table v-loading="loading" height="450" ref="table" :data="deviceList">
              <el-table-column label="名称" min-width="150" align="center" prop="configName" />
              <el-table-column label="创建时间" min-width="100" align="center" prop="createTime" />
              <el-table-column width="200" :colspan="2" label="操作" align="center" min-width="150"
                class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleInfo(scope.row)">
                    导入</el-button>
                  <el-button size="mini" type="text" @click="handleUpdate(scope.row)">编辑</el-button>
                  <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog :close-on-click-modal="false" width="30%" :title="titles" :visible.sync="innerVisible"
              append-to-body>
              <el-form :model="configForm">
                <el-form-item label="配置名称" prop="configName ">
                  <el-input v-model="configForm.configName" :disabled="!isEidt" placeholder="请输入配置名称" />
                </el-form-item>
                <h3>配置信息</h3>
                <el-input type="textarea" :rows="30" :disabled="!isEidt" placeholder="请输入内容" v-model="configForm.data">
                </el-input>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <div>
                  <el-button v-if="isEidt" @click="setUpdateSubmit()">提 交</el-button>
                  <el-button v-else @click="setUpdateSubmit()">导入</el-button>
                  <el-button @click="innerVisible = false">取 消</el-button>
                </div>
              </div>
            </el-dialog>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="快捷操作" name="operate" v-if="Number(paramList.version) > 3">
        <div>
          <div class="card-container">
            <div style="margin:20px 0;display: flex;font-size: 12px;">
              <div @click="handleOperate('同步速报', 8)" class="operate-box"><span> <svg-icon icon-class="operate_icon1"
                  class-name='custom-class' class="svg-icon-mine" /></span><span>同步速报</span> </div>
                  <div @click="handleCheck('设备自检')" class="operate-box"><span> <svg-icon icon-class="operate_icon1"
                  class-name='custom-class' class="svg-icon-mine" /></span><span>设备自检</span> </div>
            </div>
           
            <div style="margin:20px 0;display: flex;font-size: 12px;">
              <div @click="handleOperate('清空本地系统日志', 4)" class="operate-box"><span> <svg-icon icon-class="operate_icon2"
                    class-name='custom-class' class="svg-icon-mine" /></span><span>清空系统日志</span> </div>
              <div @click="handleOperate('清空本地预警日志', 6)" class="operate-box"><span> <svg-icon icon-class="operate_icon3"
                    class-name='custom-class' class="svg-icon-mine" /></span><span>清空预警日志</span> </div>
              <div @click="handleOperate('清空本地速报日志', 5)" class="operate-box"><span> <svg-icon icon-class="operate_icon4"
                    class-name='custom-class' class="svg-icon-mine" /></span><span>清空速报日志</span> </div>
              <div @click="handleOperate('清空本地气象预警', 9)" class="operate-box"><span> <svg-icon icon-class="operate_icon5"
                    class-name='custom-class' class="svg-icon-mine" /></span><span>清空气象预警</span> </div>
            </div>
            <div style="padding-bottom:20px;display: flex;">
              <div @click="handleOperate('设备重启', 1)" class="operate-box"><span> <svg-icon icon-class="operate_icon6"
                    class-name='custom-class' class="svg-icon-mine" /></span><span>设备重启</span> </div>
              <div @click="handleOperate('APP重启', 2)" class="operate-box"><span> <svg-icon icon-class="operate_icon7"
                    class-name='custom-class' class="svg-icon-mine" /></span><span>程序重启</span> </div>
              <div @click="handleOperate('设备重置', 7)" class="operate-box"><span> <svg-icon icon-class="operate_icon8"
                    class-name='custom-class' class="svg-icon-mine" /></span><span>设备重置</span> </div>
              <div @click="handleOperate('APP重置', 3)" class="operate-box"><span> <svg-icon icon-class="operate_icon9"
                    class-name='custom-class' class="svg-icon-mine" /></span><span>程序重置</span> </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="远程操作" name="rtmp">
        <div class="scroll-content" ref="main">
          <el-form :model="rtmpForm" :inline="true" label-position="left" label-width="85px">
            <div class="scroll-item">
              <div class="scroll-item-title">
                <div class="scroll-item-title-before"></div>
                <div class="scroll-item-title-content">远程配置</div>
              </div>
              <div class="card-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="开关">
                      <el-switch :disabled="forbid" v-model="rtmpForm.isOpenRtmp"
                        @change="handleStatusChange(rtmpForm.isOpenRtmp)" active-value="1" inactive-value="0">
                      </el-switch>
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="键盘">
                      <el-switch v-model="isOpenkeyBoard" :active-value="true" :inactive-value="false">
                      </el-switch>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备" prop="rtmpPushType">
                      <el-switch v-model="rtmpForm.rtmpPushType" active-value="1" inactive-color="#1890ff"
                        inactive-value="0" active-text="摄像头" inactive-text="屏幕"
                        @change="handleTypeChange(rtmpForm.rtmpPushType)">
                      </el-switch>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="地址" prop=" rtmpUrl ">
                      <span v-if="updateOpen" class="input-text">{{ rtmpForm.rtmpUrl }}</span>
                      <el-input v-else v-model="rtmpForm.rtmpUrl" placeholder="请输入地址" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="操作用户" prop=" rtmpUrl ">
                      <span class="input-text">{{ userList.join() }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
        <el-row>
          <el-col :span="8">
            <webrtc v-if="rtmpForm.isOpenRtmp == '1'" :videoSrc="videoSrc"></webrtc>
          </el-col>
          <el-col :span="16">
            <key-board v-show="isOpenkeyBoard" :pageData="pageData"></key-board> </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="截图" name="shotphoto" v-if="Number(paramList.version) > 3">
        <div>
          <div style="margin: 10px 0">
            <el-button @click="handleImg">实时普通截图</el-button>
            <el-button @click="handleHDimg">实时高清截图</el-button>
          </div>
          <img :src="mapSrc" alt="" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer"
      v-show="activeName != 'operate' && activeName != 'copy' && activeName != 'shotphoto'">
      <el-button v-if="updateOpen" @click="handleUpdateConfig()">更新配置</el-button>
      <div v-else>
        <el-button @click="updateSubmit()">提 交</el-button>
        <el-button v-show="activeName == 'mqtt' && isregister" @click="handleRegister()">注
          册</el-button>
        <el-button @click="updateCancle">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment';
import {
  upload,
  download,
  deviceRestart,
  synchronizeQuickReport,
  getDeviceConfigList,
  getDeviceConfig,
  updateDeviceConfig,
  delDeviceConfig,
  addInsertDevice,
  downloadScreenshotFile,
  importCertGen,
  getRemoteUser,
  addRemoteUser,
  remoteKeyboard,
  systemCheck,
} from "@/api/allDevice/allDevice";
import keyBoard from "./keyBoard.vue";
import webrtc from "./webrtc.vue";
import Map from "./Map.vue";
import Cookies from 'js-cookie';
export default {
  dicts: [
    "sys_device_mode",
    "sys_log_type"
  ],
  components: {
    webrtc,
    keyBoard,
    Map
  },
  name: 'reply',
  props: {
    parentId: {
      type: [String, Number],
      default: null,
    },
    pageData: {
      type: Object,
      default: {},
    }
  },
  data() {
    return {
      videoSrc: null,
      forbid: false,
      mapSrc: null,
      isregister: false,
      activeName: 'mqtt',
      modList: [],
      projectList: [],
      form: {},
      paramList: this.pageData,
      file: null,
      mqttForm: {},
      updateOpen: true,
      nettyForm: {},
      fileForm: {},
      warnForm: {},
      volumeForm: {},
      reportForm: {},
      energyForm: {},
      weatherForm: {},
      videoForm: {},
      isOpenkeyBoard: false,//开启键盘
      gpsForm: {},
      ntpForm: {},
      rtmpForm: { rtmpUrl: '' },
      deviceForm: {},
      passwordOnOff: true,
      passwordOnOff1: true,
      upload: {
        url: "",
        fileList: [],
        file: null,
      },
      isupload: false,
      innerVisible: false,
      isEidt: false,
      deviceList: [],
      configForm: {},
      titles: '',
      loading: true,//表格遮罩层
      setDate: false,//设置时间控件隐藏,
      warnNoneConfigList: ['屏显', '爆闪'],
      warnConfigList: ['屏显', '警报', '爆闪', '录像', '采集', '统计'],
      warnNoneResponse: [],
      warnBlueResponse: [],
      warnYellowResponse: [],
      warnOrangeResponse: [],
      warnRedResponse: [],
      timer: null,
      userList: []
    };
  },
  computed: {},
  created() {
    this.getConfig()
    this.getDeviceList()
  },
  mounted() {
  },
  beforeCreate() { },
  beforeMount() { },
  beforeDestroy() {
    clearTimeout(this.timer);
    // if (this.rtmpForm.isOpenRtmp == '1') {
    //   this.handleStatusChange('0')
    // }
  },
  methods: {
    handleCheckedChange(val, name) {
      let arr = ['0', '0', '0', '0', '0', '0']
      this.warnConfigList.forEach((item, index) => {
        let _arr = val.filter(tag => {
          return tag == item
        })
        if (_arr.length > 0) {
          arr[index] = '1'
        }
      })
      this.warnForm[name + 'Config'] = arr.join()
    },
    // mqtt注册
    handleRegister() {
      axios({
        method: 'post',
        url: this.mqttForm.serverIp + this.mqttForm.mqttRegisterUrl,
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        params: {
          license: this.mqttForm.license,
          owner: this.mqttForm.owner,
          type: this.mqttForm.type
        }
      }).then(async (res) => {
        if (res.data.Result.clientId) {
          this.mqttForm.mqttClientId = res.data.Result.clientId
          this.mqttForm.groupId = res.data.Result.groupId
          this.mqttForm.mqttAccount = res.data.Result.uname
          this.mqttForm.mqttPassword = res.data.Result.pwd
        } else {
          return this.$modal.msgError(res.data.Result)
        }
        axios({
          method: 'post',
          url: this.mqttForm.serverIp + this.mqttForm.mqttAuthenticationUrl,
          headers: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          params: {
            scope: 'EEW,EQR',
            clientId: res.data.Result.clientId,
            pwd: res.data.Result.pwd,
            uname: res.data.Result.uname
          }
        }).then(async (res1) => {
          this.$modal.msgSuccess('注册成功');
          this.isregister = false
          res1.data.Result.forEach(item => {
            if (item.scope == 'EEW') {
              this.mqttForm.mqttIp = item.mqtthost
              this.mqttForm.mqttPort = item.port
              this.mqttForm.subscribedTopicWarning = item.topic
              this.mqttForm.ackTopicWarning = item.ackTopic || 'EEW/ACK'
            } else {
              this.mqttForm.subscribedTopicReport = item.topic
              this.mqttForm.ackTopicReport = item.ackTopic || 'EQR/ACK'
            }
          })
        })
      })
    },
    // 监测是否开启对时服务
    changTime(val) {
      if (val == '1') {
        this.setDate = false
      } else {
        this.ntpForm.systemTime = 0
        this.setDate = true
      }
    },
    // 上传证书
    async handeFile(file, fileList) {
      // this.upload.file = file;
      console.log(123)
      if (1024 * 1024 <= file.size / 1024) {
        this.$modal.msgError("上传文件大小不能超过1G");
        return false;
      } else {
        console.log(fileList, 'fileList')
        // this.upload.fileList = fileList;
        const formData = new FormData();
        formData.append("file", fileList[0].raw);
        this.upload.fileList = []
        const res = await importCertGen(formData);
        if (res.code == 200) {
          this.warnForm.publicKey = res.msg
        }
        // this.uploadFun(file.raw);
      }
    },
    // 时间戳格式化成时分秒
    timestampToTime(timestamp) {
      return moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
    },

    formatModel(val) {
      switch (val) {
        case '0':
          return "按最新预警更新";
        case '1':
          return "按本地预估烈度更新";
        case '2':
          return "按预警等级更新";
        default:
          break;
      }
    },
    formatScreenLightStatus(val) {
      switch (val) {
        case '0':
          return "常亮";
        case '1':
          return "人体感应模式";
        case '2':
          return "自定义";
        default:
          break;
      }
    },
    formatScreenLightTime(val) {
      switch (val) {
        case '0':
          return "30秒";
        case '1':
          return "1分钟";
        case '10':
          return "10分钟";
        case '15':
          return "15分钟";
        default:
          break;
      }
    },
    formatReportSource(val) {
      switch (val) {
        case '0':
          return "预警平台";
        case '1':
          return "管理平台";
        case '2':
          return "预警平台&管理平台";
        default:
          break;
      }
    },
    formatFileUploadTime(val) {
      switch (val) {
        case '0':
          return "随机";
        case '1':
          return "立即";
        case '2':
          return "2分钟";
        case '5':
          return "5分钟";
        case '10':
          return "10分钟";
        default:
          break;
      }
    },
    // 回显点击地图信息
    updateLocation(Addr) {
      console.log("位置信息：", Addr);
      this.gpsForm.localLongitude = Addr.lon;
      this.gpsForm.localLatitude = Addr.lat;
      this.gpsForm.isAutoLocation = '0'
    },

    // 密码框显示隐藏
    hidden() {
      this.passwordOnOff = !this.passwordOnOff;
    },
    hidden1() {
      this.passwordOnOff1 = !this.passwordOnOff1;
    },
    // tab切换
    async handleClick(tab, event) {
      this.updateOpen = true
      this.passwordOnOff = true
      if (tab.name == 'operate' || tab.name == 'copy' || tab.name == 'shotphoto') {
        return
      }
      // console.log(Object.keys(this[tab.name + 'Form']),'tab.name')
      // if (Object.keys(this[tab.name + 'Form']).length > 0) {
      //   return
      // }
      let urlName = 'get' + tab.name + 'Config'
      this[tab.name + 'Form'] = await this.$api[urlName](this.pageData.code)
      console.log(this[tab.name + 'Form'], 'tab.name')
      if (this.activeName == 'rtmp') {
        if (this.rtmpForm.isOpenRtmp == '1') {
          this.forbid = true
          setTimeout(() => {
            this.forbid = false
          }, 5000)
        }
        if (!this.timer) {
          this.timer = setInterval(async () => {
            let _form = await this.$api[urlName](this.pageData.code)
            if (this.updateOpen) {
              this[tab.name + 'Form'] = _form
              this.videoSrc = 'webrtc://' + _form.rtmpUrl + '/live/' + this.pageData.code
            } else {
              this.rtmpForm.isOpenRtmp = _form.isOpenRtmp
            }
            const res1 = await getRemoteUser(this.pageData.code)
            this.userList = res1.data
            if (this.rtmpForm.isOpenRtmp == '1' && this.activeName == 'rtmp') {
              await addRemoteUser({
                userName: Cookies.get('username'),
                deviceCode: this.pageData.code
              })
              await remoteKeyboard({
                code: this.pageData.code,
                key: '1000'
              })
            }
          }, 5000)
        }

      }
      if (this.activeName == 'ntp') {
        this.ntpForm.isOpenNtp == '1' ? this.setDate = false : this.setDate = true
      }

      if (tab.name == 'warn') {
        this.warnNoneResponse = this.formatResponseConfig(this.warnForm.warnNoneResponseConfig, this.warnNoneConfigList)
        this.warnBlueResponse = this.formatResponseConfig(this.warnForm.warnBlueResponseConfig, this.warnConfigList)
        this.warnYellowResponse = this.formatResponseConfig(this.warnForm.warnYellowResponseConfig, this.warnConfigList)
        this.warnOrangeResponse = this.formatResponseConfig(this.warnForm.warnOrangeResponseConfig, this.warnConfigList)
        this.warnRedResponse = this.formatResponseConfig(this.warnForm.warnOrangeResponseConfig, this.warnConfigList)
      }
      if (tab.name == 'gps') {
        // 地图坐标
        this.$refs.map.mapDraw(
          [this.gpsForm.localLongitude, this.gpsForm.localLatitude]
        );
      }
    },
    // 预警响应配置的值格式化
    formatResponseConfig(val, tarArr) {
      let arr = []
      let _arr = val.split(',')
      _arr.forEach((item, index) => {
        if (item == '1') {
          if (tarArr.length == 2) {
            if (index > 0) {
              arr.push(tarArr[1])
            } else {
              arr.push(tarArr[index])
            }
          } else {
            arr.push(tarArr[index])
          }
        }
      })
      return arr
    },
    // 获取设备信息
    async getConfig() {
      let urlName = 'get' + this.activeName + 'Config'
      this[this.activeName + 'Form'] = await this.$api[urlName](this.pageData.code)
      if (this.activeName == 'ntp') {
        this.ntpForm.isOpenNtp == '1' ? this.setDate = false : this.setDate = true
      }
      if (this.activeName == 'warn') {
        this.warnNoneResponse = this.formatResponseConfig(this.warnForm.warnNoneResponseConfig, this.warnNoneConfigList)
        this.warnBlueResponse = this.formatResponseConfig(this.warnForm.warnBlueResponseConfig, this.warnConfigList)
        this.warnYellowResponse = this.formatResponseConfig(this.warnForm.warnYellowResponseConfig, this.warnConfigList)
        this.warnOrangeResponse = this.formatResponseConfig(this.warnForm.warnOrangeResponseConfig, this.warnConfigList)
        this.warnRedResponse = this.formatResponseConfig(this.warnForm.warnOrangeResponseConfig, this.warnConfigList)
      }
      if (this.activeName == 'gps') {
        this.$refs.map.mapDraw(
          [this.gpsForm.localLongitude, this.gpsForm.localLatitude]
        );
      }
    },
    // 经纬度修改事件
    changeGps(lon, lat) {
      this.gpsForm.isAutoLocation = '0'
      this.$refs.map.mapDraw(
        [lon, lat]
      );
    },
    // 获取设备类型
    async handleModeType(type) {
      let data = await this.$api.getMod({ type: this.form.deviceType });
      this.modList = data;
      this.form.facId = null;
      this.form.modelId = null;
    },

    // 获取设备配置列表
    async getDeviceList() {
      this.loading = true
      const res = await getDeviceConfigList(this.pageData.code)
      if (res.code == 200) {
        this.deviceList = res.data || []
        this.loading = false;
      }
    },

    // 更新配置
    async setUpdateSubmit() {
      if (this.isEidt) {
        // 新增
        if (this.titles == '新增') {
          this.configForm.deviceCode = this.pageData.code
          const res = await addInsertDevice(this.configForm);
          if (res.code == 200) {
            this.$modal.msgSuccess(res.msg);
            this.innerVisible = false;
          }
        } else {
          // 修改
          const res = await updateDeviceConfig(this.configForm);
          if (res.code == 200) {
            this.$modal.msgSuccess(res.msg);
            this.innerVisible = false;
          }
        }
        // 导入
      } else {
        const time = new Date().getTime();
        const fileContent = new File([this.configForm.data], `${time}.txt`, { type: "" });
        const formData = new FormData();
        formData.append("file", fileContent);
        console.log(formData, 'formData')
        const res = await upload({ code: this.configForm.deviceCode, file: formData });
        if (res.code == 200) {
          this.$modal.msgSuccess(res.msg);
          this.innerVisible = false;
        }
      }
      // 刷新列表
      this.getDeviceList()
    },
    // 取消更新事件
    updateCancle() {
      this.getConfig()
      this.isregister = false
      this.updateOpen = true
      this.$refs.map.handleUpdate(!this.updateOpen)
    },
     // 设备远程自检
     async handleCheck(name) {
      this.$modal
        .confirm('是否需要' + name)
        .then(async () => {
          const res = await systemCheck(this.pageData.code);
          if (res.code == 200) {
            this.$modal.msgSuccess(name + '成功');
          } else {
            this.$modal.msgError(name + '失败')
          }
        })
        .catch(() => {
        });
    },
    // 快捷操作
    async handleOperate(name, id) {
      this.$modal
        .confirm('是否需要' + name)
        .then(async () => {
          if (id == 8) {
            const res = await synchronizeQuickReport(this.paramList.code, 10);
            if (res.code == 200) {
              this.$modal.msgSuccess(name + '成功');
            } else {
              this.$modal.msgError(name + '失败')
            }
            return
          }
          const res = await deviceRestart({ deviceCodes: [this.paramList.code], type: id });
          if (res.code == 200) {
            // this.$modal.alertError(res.data);
            if (res.data.successNum > 0) {
              this.$modal.msgSuccess(name + '成功');
            } else {
              this.$modal.msgError(name + '失败')
            }
          }
        })
        .catch(() => {
        });
    },
    // 更新配置
    handleUpdateConfig() {
      this.updateOpen = false
      this.$refs.map.handleUpdate(!this.updateOpen)
    },
    // 更新配置提交
    async updateSubmit() {
      let urlName = 'update' + this.activeName + 'Config'
      this[this.activeName + 'Form'].code = this.pageData.code
      if (this.activeName == 'ntp')
        if (this.ntpForm.isOpenNtp == '0')
          if (this.ntpForm.systemTime == 0)
            return this.$modal.msgError('请设置系统时间')
      const res = await this.$api[urlName](this[this.activeName + 'Form'])
      if (res.code == 200) {
        if (this.activeName == 'rtmp') {
          this.videoSrc = 'webrtc://' + this.rtmpForm.rtmpUrl + '/live/' + this.pageData.code
        }
        this.updateOpen = true
        this.$modal.msgSuccess(res.msg);
      } else {
        this.$modal.msgError(res.msg)
      }
    },
    // 远程屏幕开关监控
    async handleStatusChange(val) {
      if (val == '1') {
        this.forbid = true
        await addRemoteUser({
          userName: Cookies.get('username'),
          deviceCode: this.pageData.code
        })
        setTimeout(() => {
          // 禁止使用开关
          this.forbid = false
        }, 5000)
      }
      this.rtmpForm.isOpenRtmp = val
      this.rtmpForm.code = this.pageData.code
      const res = await this.$api['updatertmpConfig'](this.rtmpForm)
      if (res.code == 200) {
        this.$modal.msgSuccess(res.msg);
      } else {
        this.$modal.msgError(res.msg)
      }
    },
    async handleTypeChange(val) {
      this.rtmpForm.rtmpPushType = val
      this.rtmpForm.code = this.pageData.code
      // this.rtmpForm.rtmpPushType = val
      const res = await this.$api['updatertmpConfig'](this.rtmpForm)
      if (res.code == 200) {
        // this.$modal.msgSuccess(res.msg);
      } else {
        this.$modal.msgError(res.msg)
      }
    },
    // 导入
    async handleInfo(row) {
      this.titles = '导入'
      this.getDeviceInfo(row.id, false)
    },
    // 编辑
    async handleUpdate(row) {
      this.titles = '编辑'
      this.getDeviceInfo(row.id, true)
    },

    // 获取设备配置信息
    async getDeviceInfo(id, isEidt) {
      const res = await getDeviceConfig(id)
      if (res.code == 200) {
        this.configForm = res.data
        this.isEidt = isEidt
        this.innerVisible = true
        // this.getDeviceList()
      }
    },
    // 删除
    async handleDelete(row) {
      const res = await delDeviceConfig(row.id)
      if (res.code == 200) {
        this.$modal.msgSuccess(res.msg);
        this.getDeviceList()
      }
    },
    // 新增
    async handelAdd() {
      this.configForm.data = await download({ code: this.paramList.code });
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.param.scrollTop = this.$refs.main.clientHeight
        }, 13)
      })
      this.titles = '新增'
      this.isEidt = true
      this.innerVisible = true
    },
    // 截图功能
    async downloadScreenshotFile(id) {
      let res = await downloadScreenshotFile({
        code: this.paramList.code,
        type: id,
      });
      // if (res.code == 200) {
      this.loading = false;
      this.mapSrc = "data:image/png;base64," + res;
      console.log("res: ", res);
    },
    // 实时截图
    handleImg() {
      this.downloadScreenshotFile("1");
    },

    // 高清截图
    handleHDimg() {
      this.downloadScreenshotFile("2");
    },

  },
};
</script>
<style lang='scss' scoped>
#reply {
  width: 100%;
  height: 100%;
  // padding: 20px;
  // position: relative;
}

.card-container {
  padding-bottom: 0;
  margin-bottom: 10px;
}

.box-card {
  margin-top: 20px;
}

.scroll-content {
  position: relative;
  width: 100%;

  .scroll-item {
    width: calc(100% - 20px);
    margin-bottom: 10px;

    .scroll-item-title {
      position: relative;
      height: 38px;
      font-weight: 600;
      font-size: 16px;
      color: #fff;

      div {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      // .scroll-item-title-before {
      //   left: 16px;
      //   width: 4px;
      //   height: 22px;
      //   background: #1890ff;
      // }

      .scroll-item-title-content {
        // left: 28px;
      }

      .scroll-item-title-after {
        right: 28px;
      }
    }

    .scroll-item-content {
      // padding: 0 20px;
    }
  }
}

.body-title {
  margin-bottom: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}



::v-deep .el-tabs__item {
  font-weight: 600;
  color: #000;
  font-size: 16px;
}

::v-deep .el-input__inner {
  width: 280px;
  // color: #000;
}

::v-deep .el-form-item__label {
  font-weight: 400;
  // color: #000;
}

// ::v-deep .el-input.is-disabled .el-input__inner {
//   color: #555;
// }
.input-text {
  color: rgba(255, 255, 255, .6);
}

.input-icon {
  height: 39px;
  width: 14px;
  margin-left: 2px;
}

.dialog-footer {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  // margin-left: 160px;
}



::v-deep .el-tabs__header {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  padding-top: 60px;
  height: 100%;
  background-color: rgba(35, 39, 43, .2);
}

::v-deep .el-tabs--left .el-tabs__item.is-left {
  position: relative;
  text-align: left;
  padding-left: 40px;
  // border-top-right-radius: 10px;
  // border-bottom-right-radius: 10px;
  // overflow: hidden;
}

//  ::v-deep .el-tabs__item.is-active::before,
// ::v-deep .el-tabs__item.is-active::after {
//   display: block;
//   position: absolute;
//   content: "";
//   width: 10px;
//   height: 10px;
//   background-color: #f3f5f9;
//   border-radius: 50%;
//   top: -5px;
//   right: 0;
//   z-index: 3;
// }

::v-deep .el-tabs__item.is-active {
  background-color: rgba(255, 255, 255, .1);
  color: #fff;
}

::v-deep .el-tabs__item:hover {
  color: #fff;
}

::v-deep .el-tabs__item {
  font-weight: 600;
  font-size: 16px;
  color: rgba(255, 255, 255, .6);
}

::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  width: 0
}


::v-deep .el-tabs--left .el-tabs__active-bar.is-left {
  left: 0;
  right: auto;
  width: 3px;
  margin-top: 12px;
  height: 14px !important;
  background-color: #fff;
}

::v-deep .el-tabs__content {
  margin-left: 160px;
}

.operate-box {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin-right: 20px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.24), rgba(69, 81, 82, 1)),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(69, 81, 82, 1));

  // background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(69, 81, 82, 1) 100%);
  //  border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(69, 81, 82, 1)) 1 1;
  //  clip-path: inset(0 round 4px);
  >span {
    text-align: center;
  }

  >span:last-child {
    margin-top: 10px;
  }
}

::v-deep .el-switch__label {
  color: rgba(255, 255, 255, 0.6);
}

::v-deep .el-switch__label.is-active {
  color: #1890ff;
}
</style>